<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>生命体征检测云平台</title>
		<link rel="shortcut icon" href="static/logo.ico" />
		<link rel="stylesheet" href="static/css/index.css" />
		<link rel="stylesheet" href="static/layui/css/layui.css" />
		<script type="text/javascript" src="static/js/jquery.min.js"></script>
		<script type="text/javascript" src="static/layui/layui.js"></script>
		<script type="text/javascript" src="static/echarts5.4.0/echarts.js"></script>


		<style>
			html,
			body,
			#container {
				height: 100%;
				width: 100%;
				margin: 0;
				background-color: #efefef;
			}

			.collision-btn.disable {
				background-image: none;
				color: lightgrey;
				border-color: lightgrey;
				cursor: not-allowed;
			}

			.collision-btn.disable:hover {
				background-color: #fff;
				border-color: lightgrey;
			}

			.input-card .btn {
				margin-right: .8rem;
			}

			.amap-marker {
				opacity: 0.01;
			}

			.nav-right {
				top: 1.5rem !important;
			}

			.container {
				width: 100%;
				height: 100%;
				position: fixed;
				top: 6rem;
			}

			.show-grid {
				padding: 20px;
				box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.2);
			}

			.show-icon-img {
				width: 60px;
				height: 60px;
			}

			.grid-text {
				font-size: 48px;
				font-weight: 800;
			}

			.text-red,
			.line-red,
			.lines-red {
				color: #c11508;
			}

			.text-green,
			.line-green,
			.lines-green {
				color: #39b54a;
			}

			.grid-xt-color,
			.line-xt {
				color: #ec2a65;
			}

			.grid-hx-color,
			.line-hx {
				color: #37aaff;
			}

			.grid-mx-color,
			.line-mx {
				color: #e5b828;
			}

			.grid-td-color,
			.line-td {
				color: #7b49e6;
			}

			.grid-demo {
				margin: 1rem;
				padding: 20px;
				line-height: 60px;
				text-align: center;
				background-color: #ffffff;
				color: #000000;
				border-radius: 10px;
			}

			.grid-tag {
				font-size: 12px;
				vertical-align: middle;
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				padding: 0px 8px;
				height: 25px;
				font-family: Helvetica Neue, Helvetica, sans-serif;
				white-space: nowrap;
			}

			.grid-tag[class*="line-"]::after {
				content: " ";
				width: 200%;
				height: 200%;
				position: absolute;
				top: 0;
				left: 0;
				border: 1px solid currentColor;
				-webkit-transform: scale(0.5);
				transform: scale(0.5);
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				box-sizing: border-box;
				border-radius: inherit;
				z-index: 1;
				pointer-events: none;
			}

			.grid-demo-bg1 {
				background-color: #63BA79;
			}

			.layui-col-md3 {
				height: 60px;
			}

			.animation-grid {
				width: 100%;
				height: auto;
				position: absolute;
				background-color: #ffffff;
				top: 26%;
			}
		</style>
		<script>
		    $(function() {
        		$(".sign_out").click(function(){
        			localStorage["logintypes"]='';
        						localStorage["loginName"]='';
        				        window.location='login.html'
                });
				$('.userinfo').hover(function() {});
				var chartDom = document.getElementById('main');
				var myChart = echarts.init(chartDom);
				var chartDom2 = document.getElementById('main2');
				var myChart2 = echarts.init(chartDom2);
				var chartDom3 = document.getElementById('main3');
				var myChart3 = echarts.init(chartDom3);
				var chartDom4 = document.getElementById('main4');
				var myChart4 = echarts.init(chartDom4);
				var option;

				function randomData() {
					now = new Date(+now + oneDay);
					value = value + Math.random() * 21 - 10;
					return {
						name: now.toString(),
						value: [
							[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
							Math.round(value)
						]
					};
				}
				let data = [];
				let now = new Date();
				// var a=now.getHours()+':'+now.getMinutes()+':'+ (now.getSeconds()+1);getSeconds();
				// console.log(a)
				let oneDay = 24 * 3600 * 1000;
				let value = Math.random() * 10;
				for (var i = 0; i < 50; i++) {
					data.push(randomData());
				}
				option = {
					  color: ["#ec2a65"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data
					}]
				};
				option2 = {
					  color: ["#37aaff"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data
					}]
				};
				option3 = {
					  color: ["#e5b828"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data
					}]
				};
				option4 = {
					  color: ["#7b49e6"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data
					}]
				};
				setInterval(function() {
					for (var i = 0; i < 5; i++) {
						data.shift();
						data.push(randomData());
					}
					myChart.setOption({
						series: [{
							data: data
						}]
					});

					option && myChart.setOption(option);
					option && myChart2.setOption(option2);
					option && myChart3.setOption(option3);
					option && myChart4.setOption(option4);
				}, 1000);

			})
		</script>
	</head>
	<body>
		<div class="container">
			<div class="layui-row">
				<div class="layui-col-md3 ">
					<div class="layui-row grid-demo show-grid">
						<div class="layui-col-md1 ">
							<img src="static/image/xticon.png" class="show-icon-img" />
						</div>
						<div class="layui-col-md9 grid-xt-color">
							<span class="grid-text">80</span> / 每分钟
						</div>
						<div class="layui-col-md1">
							<div class="grid-tag line-green">正常</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md3 ">
					<div class="layui-row grid-demo show-grid">
						<div class="layui-col-md1">
							<img src="static/image/hxicon.png" class="show-icon-img" />
						</div>
						<div class="layui-col-md9 grid-hx-color">
							<span class="grid-text">12</span> / 每分钟
						</div>
						<div class="layui-col-md1">
							<div class="grid-tag line-green">正常</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md3 ">
					<div class="layui-row grid-demo show-grid">
						<div class="layui-col-md1">
							<img src="static/image/mbicon.png" class="show-icon-img" />
						</div>
						<div class="layui-col-md9 grid-mx-color">
							<span class="grid-text">5</span> / 每分钟
						</div>
						<div class="layui-col-md1">
							<div class="grid-tag line-green">正常</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md3 ">
					<div class="layui-row grid-demo show-grid">
						<div class="layui-col-md1">
							<img src="static/image/tdicon.png" class="show-icon-img" />
						</div>
						<div class="layui-col-md9 grid-td-color">
							<span class="grid-text">70</span> / CM
						</div>
						<div class="layui-col-md1">
							<div class="grid-tag line-green">正常</div>
						</div>
					</div>
				</div>
			</div>

		</div>
		<div class="animation-grid">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
				<legend>实时心跳 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
			</fieldset>
			<div class="layui-row">
				<div class="layui-col-md12">
					<div id="main" style="width:100%;height:260px;"></div>
				</div>
			</div>
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
				<legend>实时呼吸 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
			</fieldset>
			<div class="layui-row">
				<div class="layui-col-md12">
					<div id="main2" style="width:100%;height:260px;"></div>
				</div>
			</div>
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
				<legend>实时脉象 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
			</fieldset>
			<div class="layui-row">
				<div class="layui-col-md12">
					<div id="main3" style="width:100%;height:260px;"></div>
				</div>
			</div>
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
				<legend>实时体动 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
			</fieldset>
			<div class="layui-row">
				<div class="layui-col-md12">
					<div id="main4" style="width:100%;height:260px;"></div>
				</div>
			</div>
		</div>

		<div class="info">
			<div class="nav-left">
			<a class="login"></a>
				<a class="hometext" href="index.html" v-if="uInfoData.loginType !=1">首页</a>
				<a class="hometext" href="home.html" v-if="uInfoData.loginType == 1">首页</a>
			</div>
			<div class="nav-right">
				<ul>
					<li><a href="monitoring.html"  v-if="uInfoData.loginType !=1">监测</a></li>
					<li><a href="historical_data.html" v-if="uInfoData.loginType !=1">历史数据</a></li>
					<li><a href="historical_info.html" v-if="uInfoData.loginType == 1">历史数据</a></li>
					<li><a href="call_p.html">离床报警</a></li>
					<li><a href="#">康养中心</a></li>
					<li><a href="#">中医问诊</a></li>
				</ul>
			</div>
			<div class="userinfo" id="userinfo">
				<img src="static/image/user.png" />
				<!-- <div class="red-dot"></div> -->
				<ul class="user_dropdown">
					<li class="dropdown_item user_ctrl">
						<div class="nickname">小店区（管理员）</div>
						<div class="sign_out">退出</div>
					</li>
					<li class="dropdown_item msg_item">
						<a href="user.html" target="_blank">
							<span>个人中心</span>
						</a>
					</li>
					<li class="dropdown_item msg_item">
						<a href="my_message.html" target="_blank">
							<span>我的消息</span>
							<span class="msg_unread unread_count show">5</span>
						</a>
					</li>
					<li class="dropdown_item">
						<a href="equipment.html">
							<span>设备</span>
						</a>
					</li>
				</ul>
			</div>
		</div>

	</body>
</html>
